<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <title>test - CIF2</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

        <link href="" rel="stylesheet" />
        <script src="vendor/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"> </script>
        
        <style type="text/css">
            *{
                margin:0;
                padding:0;
            }
             .center{
                width: 80%;
                margin: 0px auto!important;
                padding: 10px;
            }
            .bg{
                background: #f5f5f5;
                padding: 15px; 
                margin:10px;
                border:#ccc thin solid;
               /* border-radius: 3px;
                -moz-border-radius: 3px;
                -webkit-border-radius: 3px;*/
            }
            .bgcolor1{
                background: #719BC1;
            }
            .bgcolor2{
                background: #99c;
            }
            /************* 构建table 开始  *****************/
            .mytb table{
                empty-cells: show;
                text-align: center;
            }
            .mytb table td{
                border-top:#ccc thin solid;
                border-left:#ccc thin solid;
                min-width: 100px;
                padding:3px;
            }
            .mytb table tr td:nth-last-child(2){
                border-right:#ccc thin solid;
            }
            .mytb table tr:nth-last-child(2) td{
                border-bottom:#ccc thin solid;
            }
                 /* 去除每列最后一个td的边框  */
            .mytb table tr:nth-last-child(1) td{
                border: none;
            }
                 /* 去除每行最后一个td的边框  */
            .mytb table tr td:nth-last-child(1){
                border:none;
                color:#0078E7;
            }
            .mytb table input[type="text"]{
               border: none;
               width:100%;
               height: 100%;
               background:none;
           }
           .mytb table .cloneTr{
               display:none;
           }
           /************* 构建table 完成 *************** */
          #choose{
              display: none;
          }
        </style>
        <script type="text/javascript">
           
            // var tdl2l,tdlf,tdfl,addcolbtn,addrowbtn,cloneTr,clonenewTr,row,col;

            $(function() {
                
                /** 使用方法：
                                    复制mytb函数代码，导入构建表格的css，写一个带有第一行class="cloneTr"的行即可;
                  table赋予一个ID，便于调用, $(function(){ mytb(tableID);mytb(tableID2);   });
                  table外面包裹一个DIV class="mytb" ;
                 */
              function mytb(tbnamef){
                var tbname = tbnamef;
                var myreload = function(tbname) {
                    row = $("#"+tbname+" tr").length - 2;  //新添的行，减去隐藏行和行首后开始计数
                    col = $("#"+tbname+" tr:first td").length - 1;
                    addcolbtn = '<input type="button" value="添加采集项目" class="addcolbtn" id="btn-col-' + (col + 1) + '" />';
                    addrowbtn = '<input type="button" value="添加项目子项" class="addrowbtn" id="btn-row-' + (row-1)  + '" />';
                    delrowbtn = '<input type="button" value="删除行" class="delrowbtn"  />';
                    delcolbtn = '<input type="button" value="删除列" class="delcolbtn"  />';
                    addrowtext = '<input type="text" value="" class="addrowtext" id="txt-row-' + row + '" />';
                    addcoltext = '<input type="text" value="" class="addcoltext" id="txt-col-' + col + '" />';
                    contexttext = '<input type="text" value="" class="contexttext"  />';

                    tdl2l = $("#"+tbname+" tr").last().prev().children("td:last");  //获取倒数第二行最后一列的td
                    tdlf = $("#"+tbname+" tr:last td:first");   //获取最后一行第一列的td
                    tdll = $("#"+tbname+" tr:last td:last");    //获取最后一行最后一列的td
                    tdfl = $("#"+tbname+" tr:eq(1) td:last");   //获取第一行最后一列的td(由于隐藏行为0故eq(1))
                    cloneTr = $("#"+tbname+" .cloneTr:first");  //克隆源的行,隐藏于表格第一行
                    mainTr = $("#"+tbname+" tbody tr:gt(1):not('tr:last')");     //除去首尾的其他中间行
                    mainTd = $("#"+tbname+" tr td:gt(0):not(:last)");  //除去首尾的其他中间列
                //alert("test tbname,"+"#"+tbname+" tr");
                };
                myreload(tbname);

                /* 添加第一次载入的内容 */
                tdlf.append(addrowbtn);  //添加行按钮
                tdfl.append(addcolbtn);  //添加列按钮
                //tdl2l.append(delrowbtn).children().css("display","none");  //添加删除按钮先隐藏

                tdlf.parent().prev().children("td:first").append(addrowtext);   //添加第一个最后一行第一列的输入框
                tdfl.prev().append(addcoltext);    //添加第一行最后一列的输入框

                var bindListener = function(tbname) {
                    $("#"+tbname+" .addrowbtn").unbind().bind("click", function() {
                        f_addrow($(this),tbname);
                        myreload(tbname);
                        bindListener(tbname);
                    });
                    $("#"+tbname+" .addcolbtn").unbind().bind("click", function() {
                        f_addcol($(this),tbname);
                        myreload(tbname);
                        bindListener(tbname);
                    });
                    /**绑定删除行按钮*/
                    mainTr.unbind().bind({
                        "mouseover" : function() {
                            $(this).children("td:last").children().stop(true,true);  //避免闪烁，只要鼠标在上面就停止动画
                            if (!$(this).children("td:last").children().hasClass("delrowbtn")) {
                                myreload(tbname);
                                $(this).children("td:last").append(delrowbtn).children().css("display", "none");
                            }
                            $(this).find(".delrowbtn").css("display", "inline-block").unbind().bind("click", function() {
                                f_delrow($(this));
                                bindListener(tbname);
                            });
                        },
                        "mouseout" : function() {
                            $(this).find(".delrowbtn").fadeOut(200); //.css("display", "none");
                        }
                    });
                    /**绑定删除列按钮*/
                    $("#"+tbname+" tr:last td:gt(0):not(:last)").unbind().bind({   //！！可以这里用mainTd，里面再用这个,可能就可以实现放在整列上时出现按钮
                         "mouseover" : function() {
                            $(this).children().stop(true,true);
                            if (!$(this).children().hasClass("delcolbtn")) {  //parent().children("td:last").
                                myreload(tbname);
                                $(this).append(delcolbtn).children().css("display", "none");
                           }
                            $(this).find(".delcolbtn").fadeIn("slow").unbind().bind("click", function() {
                                var tdseq = $(this).parent().index()+1;  //获得当前所在列 ,此处的 $(this)是.delcolbtn
                                f_delcol($(this),tdseq);
                                bindListener(tbname);
                            });
                            $(this).children().stop(true,true);  //mover的特殊性，避免慢闪烁故加上此句
                        },
                        "mouseout" : function() {
                            $(this).children().stop(true,true);
                            $(this).find(".delcolbtn").fadeOut("slow");//.css("display", "none");
                        }
                        
                    });
                    /**绑定单击单元格事件*/
                    $("#"+tbname+" tr:gt(1):not(:last) td:gt(1):not(:last)").unbind().click(function(){
                        //var choosesth = '<input type="button" name="choosesth" value="选择项目子项类型" />';
                       // $("#choose").append(choosesth).children().css("display","none");
                        //$("#choose").children().fadeIn("slow");
                        //**********此处绑定弹窗插件，弹出内容为DOM #choose
                        $("#choose").fadeIn(300);
                        
                    });

                    function f_addrow(obj,tbname) {
                        //alert("addrow"+obj.attr("id")+"----"+tdlf.parent().html()); //f_newtrstr(2,2).html()
                        //倒数第二行第一列的text
                        var txtl2f_2 = obj.parent().parent().prev().children("td:first").children(); //两者虽一样，但此处不可防止不刷新
                        var txtl2f = $("#"+tbname+" tr:nth-last-child(2) td:first").children();

                        // 添加行前判断是否为空       
                        if (txtl2f.val() != "" && txtl2f.val() != null) {
                            //alert("txtl2f.val()=_"+txtl2f.val()+"_");
                            //将倒数第二行第一列的值锁定
                            txtl2f.val($.trim(txtl2f.val()));
                            txtl2f.attr("disabled", "disabled").css("color", "#333");
                            myreload(tbname);
                            //在最后一行前面加入一行
                            tdlf.parent().before(cloneTr.clone());
                            //获取克隆后的最新一行
                            clonenewTr = $("#"+tbname+" .cloneTr:last");
                            
                            clonenewTr.slideDown(2000);
                            //clonenewTr.css("display", "table-row"); //与上面的动画两者二选一
                            //预先插入删除行按钮并隐藏
                            clonenewTr.children("td:last").append(delrowbtn).children().css("display", "none");
                            
                            myreload(tbname);  //让row重新计数
                            //在添加的行中第一个td插入text
                            clonenewTr.children("td:first").append(addrowtext);
                            
                            //clonenewTr.children("td:first").children().val(mytrim(txtl2f));
                            //alert("come in");
                        } else {
                            alert("上一行(第"+(txtl2f.parent().parent().index())+"行)没数据哦！");
                            //alert("你填数据了么？");
                            //alert("txtl2f.val()=_"+txtl2f.val()+"_");
                        }
                        
                    };

                    function f_addcol(obj,tbname) {
                        //alert($("#mytb tr:first td").length + " || 该按钮的ID:" + obj.attr("id"));
                        
                        var txtfl2 = $("#"+tbname+" tr:eq(1) td:nth-last-child(2)").children(); //获取第一行倒数第二列的文本框
                        
                        //添加列前判断是否为空
                        if(txtfl2.val()!=""&&txtfl2.val()!=null){
                            txtfl2.val($.trim(txtfl2.val()));
                            txtfl2.attr("disabled", "disabled").css("color", "#333");
                            
                           $("#"+tbname+" tr td:nth-last-child(2)").after("<td> </td>");
                           myreload(tbname);  //让col重新计数 
                           obj.parent().parent().children("td:nth-last-child(2)").append(addcoltext);
                            
                            //改成 用append tr:gt(1):not(tr:last)
                            
                        }else{
                            alert("请填写好前一列的数据！");
                        }
                        
                    }

                    function f_delrow(obj) {
                        //alert("确定删除这一行么？");
                        obj.parent().parent().remove();
                    }
                    function f_delcol(obj,tdseq) {
                        //alert("确定删除这一列么？"+"这是第"+(tdseq)+"列哦！");
                        $("#"+tbname+" tr").children("td:nth-child("+tdseq+")").remove();
                    }
                    function mytrim(str) {
                        // var regExp = /(^\s*)|(\s*$)/; str.replace(regExp,""); //方法一：正则表达式
                        return $.trim(str);  //方法二：自带函数
                    }

                };
                //bindListener end
                bindListener(tbname);
                }
                
                mytb("mytb");
                mytb("testnewtb");
                
                
                
               /*************************************以下为测试部分**********************************************/
                $("#newtb tr td").click(function(){  //测试获取当前行列数 
                    var lie = $(this).index()+1;
                    var hang = $(this).parent().index()+1; 
                    alert("这是第"+hang+"行"+lie+"列");
                    /*
                                     获取点击td的行列数       方法2      
                  var hang = $(this).parent("tr").prevAll().length;   
                  var lie = $(this).prevAll().length; 
                    */
                });
                
               $("#slide").hover(
                   function(){
                    $('#aaa').slideDown("300",function(){$(this).css("display","inline-block");});  
                    //slideToggle效果一样，会切换display none block，为避免block属性造成页面样式混乱，在回调函数中写入css
                    } 
                    ,function(){
                    $('#aaa').slideUp(100); 
                    } );
            });//ready function end
            
                
            /**
                            构建表格行，(行数trnum,列数tdnum)
             */
            function f_newtrstr(trnum, tdnum) {
                var $trinit = $("<tr class='autonewtr'></tr>");
                var $tdinit = $("<td></td>");
                var $trstr = $(""), $tdstr = $("");
                for (var ii = 0; ii < trnum; ii++) {
                    if ( $trstr = $(""))
                        $trstr = $trinit;
                    else
                        $trstr = $trstr.last().after($trinit);
                    alert("out:ii=" + ii + $trstr.html());
                    //attr("TagName")
                    for (var jj = 0; jj < tdnum; jj++) {
                        //if($tdstr=$("")) $tdstr = $tdinit  ;
                        //else  $tdstr.after($tdinit);
                        $trstr = $trstr.last().append($tdinit);
                        alert("in:jj=" + jj + $trstr.html());
                    }
                    //var $trstr = $(trstr).append(tdinit);
                };
                return $trstr;
            }

            /*   还需新建方法：随意在表格中插入内容，只需输入三个参数 (第几行，第几列，插入内容) 
            */
             
             //示例追加用法
            function appendText() {
                var txt1 = "<p>Text.</p>";
                // 以 HTML 创建新元素
                var txt2 = $("<p></p>").text("Text.");
                // 以 jQuery 创建新元素
                var txt3 = document.createElement("p");
                // 以 DOM 创建新元素
                txt3.innerHTML = "Text.";
                $("p").append(txt1, txt2, txt3);
                // 在内部最后追加新元素
            }
        </script>
    </head>
    <body>

    <h1 class="center">this is header!</h1>
    <div class="mytb center bg">
        <!--备用：
            <input type="button" name="addrow" value="添加项目子项" />  &nbsp;
            "<input type='text' value='' class='addrowtext' id='txt-row-"+row+"' />"
            contentEditable="true"
        -->
        <table border="0" cellspacing="0" cellpadding="0" id="mytb">
            <tbody id="mytbbody">
            <tr class="cloneTr" >
            <td>  </td>
            <td>  </td>
            <td>  </td>
        </tr>
        <tr>
            <td> <input type='text' value='  ' class='addrowtext' style="display: none;" /> </td>
            <td> <!--<input type="text" name="text" value="" class="textrow" />-->  </td>
            <td>  </td>
        </tr>
        <tr >
            <td>  <!--<input type="text" name="text" value="" class="textrow" />--> </td>
            <td >test </td>
            <td>  </td>
        </tr>
        <tr>
            <td>  </td>
            <td> </td>
            <td> </td>
        </tr>
            </tbody>
        </table>    
        
        <div id="choose" class="bg"> 
            <label> <input type="radio" name="chooseRad" value="1" /> 单选框 </label> <input type="text" name="xmzx1" title="请输入项目子项的名称" /> <br />
            <label><input type="radio" name="chooseRad" value="2" /> 复选框 </label> <input type="text" name="xmzx2" title="请输入项目子项的名称" /> <br />
            <label><input type="radio" name="chooseRad" value="3" /> 文本框 </label> <input type="text" name="xmzx3" title="请输入项目子项的名称" /> <br />
            <label><input type="radio" name="chooseRad" value="4" /> 文本域 </label> <input type="text" name="xmzx4" title="请输入项目子项的名称" /> <br />
        </div>
    </div>
     <div class="mytb bg bgcolor2" id="p4"> 
         <table border="0" cellspacing="0" cellpadding="0" id="testnewtb">
            <tbody >
            <tr class="cloneTr" >
            <td>  </td>
            <td>  </td>
            <td>  </td>
        </tr>
        <tr>
            <td> <input type='text' value='  ' class='addrowtext' style="display: none;" /> </td>
            <td> <!--<input type="text" name="text" value="" class="textrow" />-->  </td>
            <td>  </td>
        </tr>
        <tr >
            <td>  <!--<input type="text" name="text" value="" class="textrow" />--> </td>
            <td >num.2 </td>
            <td>  </td>
        </tr>
        <tr>
            <td>  </td>
            <td> </td>
            <td> </td>
        </tr>
            </tbody>
        </table>    
     </div>
    <div class="bg"><input type="button" value="通用测试按钮" id="testbtn" /></div>
    <div class="bg">
    <div id="slide">over here ,slide down</div>
    <div id="aaa" style="display: none;background: #39c"> 1212342342 </div>
    </div>
    
    <br />
    <hr />
    <br />
    <div class="bg bgcolor1">
    <table id="newtb" border="1px" cellpadding="3" cellspacing="0"> 
        <caption>单击获取行列数</caption>
        <tr>
            <td>1------- </td>
            <td>2------- </td>
            <td>3------- </td>
        </tr>
        <tr>
            <td>1-------- </td>
            <td>2-------- </td>
            <td>3-------- </td>
        </tr>
    </table> 
    </div>
    
    <div class="bg" id="p1"> nothing one </div>
    <div class="bg" id="p2"> nothing two </div>
    <div class="bg" id="p3"> nothing three </div>
   
    </body>
</html>
